<template>
  <div>
    <h1>Interface Management</h1>
    <p>Welcome to the interface management page.</p>

    <!-- 添加接口输入框 -->
    <div class="add-interface">
      <input type="text" v-model="newInterfaceName" placeholder="Enter interface name">
      <button @click="addInterface">Add Interface</button>
    </div>

    <!-- 接口列表 -->
    <ul>
      <li v-for="(interfaceItem, index) in interfaces" :key="index">
        {{ interfaceItem.name }}
        <button @click="editInterface(index)">Edit</button>
        <button @click="deleteInterface(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 初始化接口列表
const interfaces = ref([
  { id: 1, name: 'User Management API' },
  { id: 2, name: 'Order Processing API' },
  { id: 3, name: 'Inventory Control API' }
]);

// 新建接口名称
const newInterfaceName = ref('');

// 添加新接口
function addInterface() {
  if (newInterfaceName.value.trim()) {
    interfaces.value.push({ id: Date.now(), name: newInterfaceName.value });
    newInterfaceName.value = '';
  }
}

// 编辑接口
function editInterface(index) {
  // 这里可以弹出模态框让用户编辑接口名称
  console.log(`Editing interface at index ${index}:`, interfaces.value[index]);
}

// 删除接口
function deleteInterface(index) {
  interfaces.value.splice(index, 1);
}
</script>

<!-- 可选的样式部分 -->
<style scoped>
h1 {
  color: blue;
}

.add-interface {
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}
</style>